/**
 * Created by 1 on 2016/11/17.
 */
/**
 * 数据格式演示
 * @type {Object}
 */
// var aqiSourceData = {//数据申明
// 	"北京"：{
// 		"2016-01-01":10,
// 		"2016-01-02":10,
// 		"2016-01-03":10,
// 		"2016-01-04":10
// 	}
// };
/**
 * 跨浏览器事件绑定
 * @param {[type]} ele     [元素]
 * @param {[type]} event   [事件]
 * @param {[type]} handler [函数]
 */
function addEventHandler(ele,event,handler) {
	if (ele.addEventListener) {
		ele.addEventListener(event,handler,false);
	}else if (ele.attachEvent) {
		ele.attachEvent("on" + event,handler);
	}else{
		ele["on" + event] = handler;
	}
}
/**
 * 对日期进行格式化
 * @param  {[String]} dat [日期]
 * @return {[String]}     [正确日期格式]
 */
function getDateStr(dat) {
	var y = dat.getFullYear();
	var m = dat.getMonth() + 1;
	var d = dat.getDate();

	m = m < 10 ? '0' + m : m;
	d = d < 10 ? '0' + d : d;
	return y + '-' + m +'-' +d;
}
/**
 * 给日期加上随机值
 * @param  {[Number]} seed [随机数最大值]
 * @return {[Array]}      [包含日期和数值的二维数组]
 */
function randomBuildData(seed) {
	var returnData = {};
	var dat = new Date("2016-01-01");//根据特定的时间创建日期对象
	var datStr = '';
	for (var i = 0; i < 92; i++) {
		datStr = getDateStr(dat);
		returnData[datStr] = Math.ceil(Math.random() * seed);//在相应的日期上面生成相应的随机数
		dat.setDate(dat.getDate() + 1);//日期加一，向后循环
	}
	return returnData;
}
/**
 * 数据对象
 * @type {Object}
 */
var aqiSourceData = {
	"北京":randomBuildData(100),
	"上海":randomBuildData(300),
	"南京":randomBuildData(500),
	"成都":randomBuildData(100),
	"天津":randomBuildData(100),
	"厦门":randomBuildData(200),
};
//用于渲染表格的数据
var chartData = {};
//记录当前页面的表单选项
var pageState = {
	nowSelectCity:"北京",
	nowGraTime:"day"
}
var aqiCharWrap = document.getElementById("aqi-chart-wrap");
//表格渲染函数
function renderChar() {
	var color = '',text = '';
	for(var item in chartData){
		color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);//随机产生颜色，将其变为16进制的字符
		text += '<div title="'+item+":"+chartData[item]+'" style="animation:0px .5s ease-in-out;display:inline-block; width: 10px; height:'+chartData[item]+'px; background-color:'+color+'"></div>';
	}
	aqiCharWrap.innerHTML = text;
}
//时间选择改变判断函数,将保存当前值得对象中的值进行改变
function graTimeChange() {
    var spanList = document.getElementsByTagName("span");//改变标签的样式，先将所有的样式置为0
    for (var i = 0;i < spanList.length;i++){
        spanList[i].className = '';
    }
    this.previousElementSibling.className = 'selected';//再对其当前的选择置相应的样式
	if (pageState.nowGraTime == this.value) {
		return;
	}else{
		pageState.nowGraTime = this.value;
	}
	initAqiCharData();
	renderChar();
}
//城市改变判断函数,将保存当前值得对象中的值进行改变
function citySelectChange() {
	if (pageState.nowSelectCity == this.value) {
		return;
	}else{
		pageState.nowSelectCity = this.value;
	}
	initAqiCharData();
	renderChar();
}
//初始化时间点击事件
function initGraTimeForm() {
	var timeChecked = document.getElementById("form-gra-time");
	var labelRadios = timeChecked.getElementsByTagName("input");
	for (var i = 0; i < labelRadios.length; i++) {
		addEventHandler(labelRadios[i],'click',graTimeChange);
	}
}
//初始化城市点击事件，从aqiSourceData中读取数据放入select中
function initCitySelector() {
	var citySelect = document.getElementById("city-select");
	var cityList = [];
	for(var item in aqiSourceData){//循环数组中的值，添加option，插入select中
		cityList += "<option>" + item + "</option>";
	}
	citySelect.innerHTML = cityList;
	addEventHandler(citySelect,'change',citySelectChange);
}
//初始化图标的数据格式
function initAqiCharData() {
	var nowCityData = aqiSourceData[pageState.nowSelectCity];//当前选择城市的数据
	if (pageState.nowGraTime == 'day') {
		chartData = nowCityData;
	}
	if (pageState.nowGraTime == 'week') {
		chartData = {};
		var countSum = 0,daySum = 0;week = 0;
		for(var item in nowCityData){
			countSum +=nowCityData[item];
			daySum++;
			if (new Date(item).getDay() == 6) {
				week ++;
				chartData['第' + week + '周'] = Math.floor(countSum/daySum);
				countSum = 0;
				daySum = 0;
			}
		}
		if (daySum !=0) {
			week++;
			chartData['第' +week +'周'] = Math.floor(countSum/daySum);
		}
	}
	if (pageState.nowGraTime == 'month') {
		chartData = {};
		var countSum = 0,daySum = 0,month = 0;
		for(var item in nowCityData){
			countSum +=nowCityData[item];
			daySum++;
			if (new Date(item).getMonth() != month) {
				month++;
				chartData['第' + month + '月'] = Math.floor(countSum/daySum);
				countSum = 0;
				daySum = 0;
			}
		}
		if (daySum != 0) {
			month ++;
			chartData['第' + month +'月'] = Math.floor(countSum/daySum);
		}
	}

}
//初始化函数
function init() {
	initGraTimeForm();
	initCitySelector();
	initAqiCharData();
	renderChar();
	// for(var item in aqiSourceData){
	// 	console.log(item);
	// 	console.log(aqiCharWrap[item]);
	// }
}
init();